<template>
	<view class="body"> 
		<view class="top">
			<image class="topimg" src="http://ft-glb.oss-cn-chengdu.aliyuncs.com/user-img/login.png"></image>
		</view>
		<view class="bottom">
			<view class="account" v-if="biaoji">
				<text class="name">用户名:</text> 
				<view class="username"> 
					<u--input
						placeholder="请输ID|手机号"
						border="bottom"
						v-model="user.name"
						clearable
					></u--input>
				</view>
				<text class="password">密  码:</text> 
				<view class="userpassword">
					<u--input
						type="password"
						placeholder="请输入密码"
						border="bottom"
						v-model="user.password"
						clearable
					></u--input>
				</view>
				<text class="bottom-text">忘记密码?</text>
				<text class="bottom-phone" @click="show = true">手机号一键登录注册</text>
				<view class="login">
					<u-button type="primary" text="登 录" @click="loginByUser"></u-button>
				</view>
			</view>
		</view>
		<!-- 手机号登录模态框 -->
		<view class="SMS">
				<u-modal :show="show" :showConfirmButton="false" closeOnClickOverlay="true" @close="close" >
					<view style="width: 100%;">
						<u--input placeholder="请输入手机号" border="bottom" clearable v-model="phone" ></u--input>
					<view class="yzm">
							<view class="u-demo-block__content"style="margin-top: 15px;">
										<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
										<!-- #ifndef APP-NVUE -->
										<u-input placeholder="请输入验证码" v-model="code">
										<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										<u--input >
										<!-- #endif --> 
											<template slot="suffix">
												<u-code
													ref="uCode"
													@change="codeChange"
													seconds="60"
													changeText="X秒后重新获取"
												></u-code>
												<u-button
													@tap="getCode"
													:text="tips"
													type="success"
													size="mini"
												></u-button>
											</template>
										<!-- #ifndef APP-NVUE -->
										</u-input>
										<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										</u--input>
										<!-- #endif -->
									</view>
					</view>
					<view class="model-login">
						<u-button type="primary" text="登 录" @click="yzmlogin"></u-button>
					</view>
					</view>
				</u-modal>
			</view>
	</view> 
</template>
  
<script>
	export default {
		data(){
			return {
				biaoji:true,
				show: false,
				tips: '',
				active:"",
				phone:"",
				code:"",
				user:{
					name:"",
					password:""
				}
			}
		},
		methods:{
			close(){
				this.show = false
			},
			codeChange(text) {
			        this.tips = text;
			},
			codeChange(text) {
			        this.tips = text;
			      },
			//获取验证码方法
			getCode() {
				let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
				if(str.test(this.phone)){ 
					var msg = ""
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
						title: '正在获取验证码'
						})
						uni.request({
							url:"http://localhost:8081/user/sendcode/"+this.phone,
							method:"GET",
							complete:(res) =>{
								msg = res.data.msg
								if(res.data.code == 20021){
									//定时器
									setTimeout(() => { 
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast(msg);
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
									}, 100);
								}else{
									uni.$u.toast(msg)
								}
							}
						})
						
					} else { 
						uni.$u.toast('倒计时结束后再重试');
					}
				}else{
					uni.$u.toast('手机号格式有问题!');
				}
			},
			//普通登录方法
			loginByUser(){
				let str = /^\+?[1-9][0-9]*$/
				if(this.user.name.length == 5 || this.user.name.length == 11){
					if(str.test(this.user.name) == false){
						uni.$u.toast("用户名只能是ID或者手机号")
					}else if(this.user.password.length == 0){
						uni.$u.toast("密码不能为空")
					}else{
						uni.request({
							url:"http://localhost:8081/user/login",
							method:"POST",
							data:this.user,
							complete:(res) =>{
								let user = {
									id:'',
									name:'',
									img:'',
									state:0,//状态 
									limit:0,//权限等级
									address:'',
								}
								if(res.data.code == 20011){
									uni.$u.toast("登录成功!")
									user.id = res.data.date.id
									user.name =	res.data.date.name
									user.img = res.data.date.img 
									user.state = res.data.date.state
									user.limit = res.data.date.limit  
									user.address = res.data.date.address
									//保存用户信息到缓存
									uni.setStorageSync("user",JSON.stringify(user))
									var str = "" + user.id
									this.$wt.init(user.id)//建立websoket链接
									setTimeout(()=>{
										uni.switchTab({
											url:"/pages/massage/user",
										})
									}, 1000);
								}else{ 
									uni.$u.toast("登录失败!")
								}
							}
						})
					}
				}else{
					uni.$u.toast("ID或者手机号有问题")
				}	
			},
			//验证码登录点击方法
			yzmlogin(){
				uni.request({
					url:"http://localhost:8081/user/"+this.phone+"/"+this.code,
					method:"POST",
					complete:(res) =>{
						let user = {
							id:'',
							name:'',
							img:'',
							state:0,//状态 
							limit:0,//权限等级
							address:'',
						}
						if(res.data.code == 20011){
							user.id = res.data.date.id
							user.name =	res.data.date.name
							user.img = res.data.date.img 
							user.state = res.data.date.state
							user.limit = res.data.date.limit  
							user.address = res.data.date.address
							//保存用户信息到缓存
							uni.setStorageSync("user",JSON.stringify(user))
							uni.$u.toast("登录成功!")
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/massage/user",
								})
							}, 1000);
						}else{
							uni.$u.toast("登录失败!")
						}
					}
				})
			}
		}
	}
</script>

<style>
	@import url("@/static/css/login.css");
</style>